遊戲活動關卡查詢網站Day21-條件查詢1(Vue:v-model)

2025 iThome 鐵人賽

DAY 21

Vue.js

遊戲活動關卡查詢網站系列第 21 篇

17th鐵人賽

jack1234552000

2025-09-01 01:01:25

97 瀏覽

分享至

目標
這個段落分兩篇講述大部分是先前鐵人文章已經講過的作法
我們一樣用草稿規劃到資料整理方式匯出至Supabase
並呈現在畫面上
最後會提到我們下一篇需要整理出的資料用作查詢使用

步驟
1.
因為當初線稿及資料沒規劃到這一塊
所以現在來補做

線稿如下圖我們這次要做的是D組件和R組件
按下條件查詢時只會顯示D和R組件

簡易版Schema和資料規劃如下圖
接著把CSV檔案匯至Supabase

上述資料的架構設計參考當初線稿的畫面2.1
列出條件查詢需要篩選的項目

我們拿前兩筆資料的資料來看
行動方式和敵人屬性如下圖
為了呈現這個畫面資料結構需要轉換一下

我們需要將剛才匯入Supabase的資料

[
  {
    "id": 1,
    "name": "行動方式",
    "coditionType": "行動方式",
    "eleType": "0",
    "order": 1,
    "memo": ""
  },
  {
    "id": 2,
    "name": "先制",
    "coditionType": "行動方式",
    "eleType": "3",
    "order": 1,
    "memo": ""
  },
  {
    "id": 3,
    "name": "一般",
    "coditionType": "行動方式",
    "eleType": "3",
    "order": 1,
    "memo": ""
  },
  {
    "id": 4,
    "name": "憤怒",
    "coditionType": "行動方式",
    "eleType": "3",
    "order": 1,
    "memo": ""
  },
  {
    "id": 5,
    "name": "死亡",
    "coditionType": "行動方式",
    "eleType": "3",
    "order": 1,
    "memo": ""
  },
  {
    "id": 6,
    "name": "敵人屬性",
    "coditionType": "敵人屬性",
    "eleType": "0",
    "order": 2,
    "memo": ""
  },
  {
    "id": 7,
    "name": "水",
    "coditionType": "敵人屬性",
    "eleType": "3",
    "order": 2,
    "memo": ""
  },
  {
    "id": 8,
    "name": "火",
    "coditionType": "敵人屬性",
    "eleType": "3",
    "order": 2,
    "memo": ""
  },
  {
    "id": 9,
    "name": "雷",
    "coditionType": "敵人屬性",
    "eleType": "3",
    "order": 2,
    "memo": ""
  },
  {
    "id": 10,
    "name": "光",
    "coditionType": "敵人屬性",
    "eleType": "3",
    "order": 2,
    "memo": ""
  },
  {
    "id": 11,
    "name": "暗",
    "coditionType": "敵人屬性",
    "eleType": "3",
    "order": 2,
    "memo": ""
  },
  {
    "id": 12,
    "name": "無",
    "coditionType": "敵人屬性",
    "eleType": "3",
    "order": 2,
    "memo": ""
  }
]

整理成以下架構
先以coditionType分組
再以eleType分組

[
  {
    "coditionType": "行動方式",
    "info": [
      { "eleType": "0", "name": ["行動方式"] },
      { "eleType": "3", "name": ["先制","一般", "憤怒", "死亡"] }
    ]
  },
  {
    "coditionType": "敵人屬性",
    "info": [
      { "eleType": "0", "name": ["敵人屬性"] },
      { "eleType": "3", "name": ["水","火", "雷", "光", "暗", "無"] }
    ]
  }
]

將D組件的script增加為以下程式架構
而searchList是我們將Supabase取資料後轉換的結果

<script setup>
import { supabase } from "../supabase.js";
import { ref, onMounted,computed } from "vue";
const result = ref([]);
const searchResult = ref([]);
const searchCondition = ref(
  [
  { checked: false, name: "" ,coditionType:"行動方式",value:"1"},
  { checked: false, name: "" ,coditionType:"敵人屬性",value:"2"},
  { checked: false, name: "" ,coditionType:"種族",value:"3"},
  { checked: false, name: "" ,coditionType:"標記",value:"4"},
  { checked: false, name: "" ,coditionType:"負面狀態",value:"5"},
  { checked: false, name: "" ,coditionType:"詛咒",value:"5"},
  { checked: false, name: "" ,coditionType:"其他行動",value:"5"},
  { checked: false, name: "" ,coditionType:"關卡效果",value:"6"},
  { checked: false, name: "" ,coditionType:"憤怒條件",value:"7"},
  { checked: false, name: "" ,coditionType:"攻擊方式",value:"5"}
  ]
);


onMounted(async () => {
  const { data, error } = await supabase
    .from("skillSearch")
	.select("*");

  if (error) {
    console.error(error);
  } else {
    result.value = data;
  }
});
const searchList = computed(() => {
	const sorted = [...result.value].sort((a, b) => a.order - b.order);

	const grouped = {};
	sorted.forEach(item => {
	if (!grouped[item.coditionType]) {
	grouped[item.coditionType] = {};
	}
	
	if (!grouped[item.coditionType][item.eleType]) {
	grouped[item.coditionType][item.eleType] = [];
	}
	grouped[item.coditionType][item.eleType].push(item.name);
	});

	return Object.keys(grouped).map(type => {
	const info = Object.keys(grouped[type]).map(ele => ({
	eleType: ele,
	name: grouped[type][ele]
	}));
	return { coditionType: type, info };
	});
})
</script>

template程式架構如下

<template>
<div style="overflow:auto">
<div class="row" v-for="(item,index) in searchList" :key="item.coditionType">
	<div class="col-6">
		<div class="form-check">
			<input class="form-check-input" type="checkbox" v-model="searchCondition[index].checked" :id="'title'+index">
			<label class="form-check-label" :for="'title'+index">
			{{item.info[0].name[0]}}
			</label>
		</div>
	</div>
	<div class="col-6">
		<div class="row">
				<div class="col-6" v-for="(child,index2) in item.info[1].name" :key="index2">
					<div class="form-check">
					<input class="form-check-input" type="radio" :value="child" :name="item.coditionType" 
					:id=" item.coditionType + index2" v-model="searchCondition[index].name">
					<label class="form-check-label" :for="item.coditionType + index2">
					{{child}}
					</label>
				</div>
			</div>
			</div>
		</div>
</div>
</div>
</template>

下圖是目前呈現的畫面